import React, { PureComponent, Fragment } from 'react';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Row, Col, message } from 'antd';
import copy from 'copy-to-clipboard';
import styles from './index.less';

class GroupInfo extends PureComponent {
  render() {
    const { current } = this.props;

    const copyCode = () => {
      if (copy(current.gd ? current.gd.code : '')) {
        message.success(formatMessage({ id: 'app.dm.groups.detail.copy.success' }));
      } else {
        message.error(formatMessage({ id: 'app.dm.groups.detail.copy.error' }));
      }
    };

    return (
      <Fragment>
        <Row>
          <span style={{ fontSize: '16px', color: 'rgba(0, 0, 0, 0.85)', fontWeight: 500 }}>
            <FormattedMessage id="app.dm.groups.detail.info" />
          </span>
        </Row>
        <Row style={{ marginTop: 15 }}>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.groups.detail.group.name" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {current.gd ? current.gd.name : ''}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.groups.detail.group.path" />
          </Col>
          <Col className={styles.info_con} span={5}>
            <FormattedMessage id="app.dm.groups.detail.group" /> /{' '}
            {current.path ? current.path : ''}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.groups.detail.code" />
          </Col>
          <Col className={styles.info_con_end} span={5}>
            <span style={{ color: '#666666' }}>{current.gd ? current.gd.code : ''}</span>
            <a onClick={() => copyCode()} style={{ marginLeft: 10 }}>
              <FormattedMessage id="app.dm.groups.detail.copy" />
            </a>
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.groups.detail.deviceNum" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {current.statistics ? current.statistics.deviceNum : ''}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.groups.detail.activeDeviceNum" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {current.statistics ? current.statistics.activeDeviceNum : ''}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.groups.detail.online" />
          </Col>
          <Col className={styles.info_con_end} span={5}>
            0
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.groups.detail.createTime" />
          </Col>
          <Col className={styles.info_con_end} span={21}>
            {current.gd ? current.gd.createTime : ''}
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item_bottom} span={3}>
            <FormattedMessage id="app.dm.groups.detail.desc" />
          </Col>
          <Col className={styles.info_con_end_bottom} span={21}>
            {current.gd ? current.gd.desc : ''}
          </Col>
        </Row>
      </Fragment>
    );
  }
}

export default GroupInfo;
